import React, { Component } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { Button,Toast } from 'antd-mobile'
import ctx from '@/assets/js/ctx'

export class Login extends Component {
    static contextType = ctx
    constructor(){
        super()

        this.state ={
            account:'',
            password:''
        }
    }

    getAccount = (ev) => {
        this.setState({
            account:ev.target.value
        })
    }

    getPassword = (ev) => {
        this.setState({
            password:ev.target.value
        })
    }

    toRegister = () => {
        this.props.history.push('/register')
    }

    onSubmit = () => {
        const {account,password} = this.state

        this.context.axios.post('/bulubulu/api/login',{
            account,
            password
        })
        .then(({code,msg,token})=>{
            if(code == 1){
                Toast.success(msg)
                localStorage.setItem('token',token)
                this.props.history.push('/home')
            }else{
                Toast.fail(msg)
            }
        })
    }

    toHome = () => {
        this.props.history.push('/home')
    }
    render() {
        const {getAccount,getPassword,toRegister,onSubmit,toHome} = this
        return (
            <div className={styles.login}>
                <div className={styles.formGroup}>
                    <h1 className={classnames(styles.title,"bgcolor")} onClick={toHome}>登录bulubulu</h1>
                </div>
                <ul className={styles.formGroup}>
                    <li className={classnames(styles.groupList,styles.bottomLine)} >
                        <span className={styles.inputTitle}>账号</span>
                        <input type="text" className={styles.inputText} placeholder="你的手机号/用户名" onChange={getAccount}/> 
                    </li>                    
                    <li className={classnames(styles.groupList,styles.bottomLine)} >
                        <span className={styles.inputTitle}>密码</span>
                        <input type="password" className={styles.inputText} placeholder="6~16个字符，区分大小写" onChange={getPassword}/> 
                    </li>                  
                </ul>

                <div className={styles.btnBox}>
                    <Button onClick={toRegister} className={styles.btn} style={{color:"#fb7299",border:"1px solid #fb7299",backgroundColor:"rgba(255, 255, 255, 0)"}}>注册</Button>
                    <Button onClick={onSubmit} className={styles.btn} style={{color:"#fff",backgroundColor:"#fb7299"}}>登录</Button>
                </div>
                <p className={styles.tips}>登录即代表你同意<a href="https://www.bilibili.com/blackboard/account-useragreement.html" className={styles.color}>用户协议</a>和<a href="https://www.bilibili.com/blackboard/privacy-h5.html" className={styles.color}>隐私协议</a></p>
            </div>
        )
    }
}

export default Login
